<div class="main-con-item">
    <button type="button" class="capture">捕获页面元素</button>
    <div class="input-box">
        <p>
            <b>元素路径</b>(xpath)
            <b>：</b>
        </p>
        <input type="text" name="xpathAlike">
        <button onclick="other()" type="button">切换</button>
        <input type="hidden" id="xpath">
        <input type="hidden" id="xpathAlike">
        <div class="input-box">
            <p>
                <b>数据类型：</b>
            </p>
            <p class="radio-item">
                <label>
                    <input type="radio" name="getType" value="text" checked>text</label>
                <label>
                    <input type="radio" name="getType" value="html">html</label>
                <label>
                    <input type="radio" name="getType" value="xpath">xpath</label>
            </p>
        </div>
        <p>
            <b>输出变量命名：</b>
        </p>
        <input type="text" name="rename">
    </div>
    <input type="hidden" class="item-type" name="resemblance">
</div>
<div class="liucheng-item-tips">
    <!-- <p class="in-parameter" title=""><i class="icon-tips-in"></i><em>：</em>"<b class="user-input-text tips-xpathAlike"></b>","<b class="font-in-paramter-type">Xpath</b>"</p>
<p class="dom-active-dec" title=""><i></i><em>：</em>捕获页面元素获取元素"<b class="user-input-text tips-xpathAlike"></b>","<b class="font-in-paramter-type">Xpath</b>"</p> -->
    <p class="dom-active-dec" title="">
        <i class=""></i>
        <em class="">：</em>将捕获元素的相似元素的内容生成数组，并输出为新变量</p>
    <p class="in-parameter" title="">
        <i class="icon-tips-out"></i>
        <em>：</em>"
        <b class="font-out-paramter"></b>","
        <b class="font-out-paramter-type">Array</b>"</p>

</div>
<script>

    function other() {
        let xpathAlike = document.querySelector("[name='xpathAlike']").value;
        console.log(xpathAlike)
        if (xpathAlike == "") return;
        let xpath = document.getElementById("xpath").value;
        document.querySelector("[name='xpathAlike']").value = changeXPathAlike(xpathAlike, xpath);

    }
    /**
     * @param xpath div[1]/div[$***$]/div[1]
     * @param cpath div[1]/div[1]/div[1]
     */
    function changeXPathAlike(xpath, cpath) {
        let index = xpath.indexOf('$***$');
        if (index + 6 >= xpath.length) {
            return document.getElementById("xpathAlike").value;
        }
        let nextIndex = index + 6 + xpath.substring(index + 6, xpath.length).indexOf("]");
        let lastIndex = index + cpath.substring(index, cpath.length).indexOf("[");

        console.log(xpath.substring(index + 5, xpath.length))
        let cp = cpath.substring(0, lastIndex);
        let houcp = xpath.substring(nextIndex, xpath.length);
        console.log(cp)
        console.log(houcp)
        return cp + "[$***$" + houcp;
    }
</script>